<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./bootstrap/bootstrap.min.css" />
    <script src="./jquery.js"></script>
    <script src="./bootstrap/bootstrap.min.js"></script>
  </head>
  <body>
    <!-- Button trigger modal -->
    <button
      type="button"
      class="btn btn-primary btn-lg"
      data-toggle="modal"
      data-target="#myModal"
    >
      我要留言
    </button>
    <button id="open">打开</button>
    <!-- Modal -->
    <div
      class="modal fade"
      id="myModal"
      tabindex="-1"
      role="dialog"
      aria-labelledby="myModalLabel"
    >
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button
              type="button"
              class="close"
              data-dismiss="modal"
              aria-label="Close"
            >
              <span aria-hidden="true">&times;</span>
            </button>
            <h4 class="modal-title" id="myModalLabel">发布留言</h4>
          </div>
          <div class="modal-body">
            <form class="form-horizontal">
              <div class="form-group">
                <label for="inputEmail3" class="col-sm-2 control-label"
                  >标题</label
                >
                <div class="col-sm-10">
                  <input
                    type="email"
                    class="form-control"
                    id="inputEmail3"
                    placeholder="留言标题"
                  />
                </div>
              </div>
              <div class="form-group">
                <label for="inputPassword3" class="col-sm-2 control-label"
                  >Password</label
                >
                <div class="col-sm-10">
                  <input
                    type="password"
                    class="form-control"
                    id="inputPassword3"
                    placeholder="Password"
                  />
                </div>
              </div>
              <div class="form-group">
                <div class="col-sm-offset-2 col-sm-10">
                  <div class="checkbox">
                    <label> <input type="checkbox" /> Remember me </label>
                  </div>
                </div>
              </div>
              <div class="form-group">
                <div class="col-sm-offset-2 col-sm-10">
                  <button type="submit" class="btn btn-default">Sign in</button>
                </div>
              </div>
            </form>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">
              Close
            </button>
            <button type="button" id="btn" class="btn btn-primary">确定</button>
          </div>
        </div>
      </div>
    </div>
    <script>
      //   var num = 0
      //   $(function () {
      //     setInterval(() => {
      //       num = num + 2
      //       $('.progress-bar').css('width', num + '%')
      //     }, 100)
      //   })
      $(function () {
        $('#open').click(function () {
          $('#myModal').modal('toggle')
        })
      })
    </script>
    <!--   <i class="glyphicon glyphicon-info-sign"></i>
    <form>
      <div class="form-group">
        <label for="exampleInputEmail1">Email address</label>
        <input
          type="email"
          class="form-control"
          id="exampleInputEmail1"
          placeholder="Email"
        />
      </div>
      <div class="form-group">
        <label for="exampleInputPassword1">Password</label>
        <input
          type="password"
          class="form-control"
          id="exampleInputPassword1"
          placeholder="Password"
        />
      </div>
      <div class="form-group">
        <label for="exampleInputFile">File input</label>
        <input type="file" id="exampleInputFile" />
        <p class="help-block">Example block-level help text here.</p>
      </div>
      <div class="checkbox">
        <label> <input type="checkbox" /> Check me out </label>
      </div>
      <button type="submit" class="btn btn-default">Submit</button>
    </form>
    <table
      class="table table-striped table-bordered table-hover"
      style="width: 400px"
    >
      <a class="btn btn-default" href="#" role="button">Link</a>
      <button class="btn btn-default" type="submit">Button</button>
      <input class="btn btn-default" type="button" value="Input" />
      <input class="btn btn-default" type="submit" value="Submit" />
      <img src="../" alt="..." class="img-rounded" />
      <img src="..." alt="..." class="img-circle" />
      <img src="..." alt="..." class="img-thumbnail" />
      <thead>
        <tr>
          <th>wqe</th>
          <th>1qwe23</th>
          <th>1qwe23</th>
          <th>1qwe23</th>
          <th>1qwe23</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>123</td>
          <td>123</td>
          <td>123</td>
          <td>123</td>
          <td>123</td>
        </tr>
        <tr class="success">
          <td>123</td>
          <td>123</td>
          <td>123</td>
          <td>123</td>
          <td>123</td>
        </tr>
        <tr>
          <td>123</td>
          <td>123</td>
          <td>123</td>
          <td>123</td>
          <td>123</td>
        </tr>
        <tr>
          <td>123</td>
          <td>123</td>
          <td>123</td>
          <td>123</td>
          <td>123</td>
        </tr>
        <tr class="danger">
          <td>123</td>
          <td>123</td>
          <td>123</td>
          <td>123</td>
          <td>123</td>
        </tr>
      </tbody>
    </table> -->
  </body>
</html>
